<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
  </head>
  <body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 使用get或post方法即可发送对应的请求 -->
    <script>
      /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
      document.querySelector(".get").onclick = function () {
        axios.get("https://autumnfish.cn/api/joke/list?num=6").then(
          function (response) {
            console.log(response.data.jokes[0]);
          },
          function (err) {
            console.log(err);
          }
        );
      };
      /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
      document.querySelector(".post").onclick = function () {
        axios
          .post("https://autumnfish.cn/api/user/reg", { username: "李小二" })
          .then(
            function (response) {
              console.log(response);
            },
            function (err) {
              console.log(err);
            }
          );
      };
    </script>
  </body>
</html>
